@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateY {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(-360deg);
  } 
}
.listView {
  width: 100%;
  height: 100%;
  background-color: #fffbeb;
}

.layoutClassName {
  width: 100%;
  height: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
  background-color: #fffbeb;
}

.listItem {
  width: 340rpx;
  height: 450rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 24rpx;
  /* display: inline-block; */
  float: left;
}
.listItem:nth-child(odd){
  margin-right : 22rpx;
}

.listItemFlag {
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  width: 46rpx;
  height: 32rpx;
}

.listItemState {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 100rpx;
  height: 32rpx;
}

.listItemState1 {
  composes: listItemState;
  background: url("../../image/5.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.listItemState2 {
  composes: listItemState;
  background: url("../../image/6.png");
  background-size: contain;
}

.listItemState3 {
  composes: listItemState;
  background: url("../../image/7.png");
  background-size: contain;
}

.listItemBgImage {
  width: 340rpx;
  height: 340rpx;
  background-size: cover;
  background-position: center;
}

.listItemName {
  font-size: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  font-weight: bold;
  padding:0 10rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 45rpx;
  line-height: 45rpx;
  margin-top: 15rpx;
}

.listItemMoney {
  font-size: 30rpx;
  padding-left: 10rpx;
  display: flex;
  color: #FFA402;
  align-items: center;
}

.listItemMoneyIcon {
  width: 28rpx;
  height: 28rpx;
  background: url("../../image/11.png");
  background-size: contain;
  margin-right: 10rpx;
}

.header {
  height: 180rpx;
  width: 750rpx;
  padding-left: 20rpx;
  margin: 20rpx auto;
  background-color: #fffbeb;
}

.headerImage {
  height: 180rpx;
  background-size: cover;
  background-position: center;
  margin-right: 20rpx;
  border-radius: 10rpx;
  display: inline-block;
}
.newGiftBox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.newGiftAnimationHide{
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0);
  overflow: hidden;
}
.newGiftAnimation{
  composes: newGiftAnimationHide;
  animation: bounceIn 500ms forwards;
}

.newGiftBoxHide{
  display: none
}

.newGift {
  background: #FFEA8F;
  box-shadow: inset 0 -6rpx 6rpx 0 rgba(255, 155, 0, 0.52), inset 0 0 24rpx 0 #FF9A19;
  border-radius: 24rpx;
  position: relative;
  width: 562rpx;
  height: 650rpx;
  margin-top: 150rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.newGiftHeader {
  width: 678rpx;
  height: 364rpx;
  background: url("../../image/48.png");
  background-size: contain;
  position: absolute;
  left: 28rpx;
  top: 50%;
  margin-top: -520rpx;
}

.greenBtn {
  background: #2BD51F;
  border: 6rpx solid #1C8F14;
}

.newGiftBtn {
  composes: greenBtn;
  width: 300rpx;
  height: 100rpx;
  border-radius: 70rpx;
  font-size: 40rpx;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}
.newGiftBtnPress{
  composes: newGiftBtn; 
  background: #1BBD0F;
  border: 0rpx solid #1C8F14;
  box-shadow: inset 0 2rpx 0 0 #1BAA11;
}
.newGiftBtnPress::before{
  opacity: 0;
}
.newGiftBtn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  opacity: 0.2;
  background: #FFFFFF;
}
.newGiftNumber{
  background: #FFCD63;
  border-radius: 100px;
  width: 200rpx;
  height: 70rpx;
  font-size: 20px;
  color: #BD783E;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40rpx;
}
.newGiftIcon{
  width: 230rpx;
  height: 248rpx;
  background: url("../../image/43.png");
  background-size: contain;
  margin: 60rpx auto 40rpx;
}
.newGiftIconRight{
  width: 372rpx;
  height: 374rpx;
  background: url("../../image/49.png");
  background-size: contain;
  position: absolute;
  left: 100rpx;
  top:50rpx;
}
.userHeader{
  width: 126rpx;
  height: 126rpx;
  background: url("../../image/21.png");
  background-size: contain;
  position: absolute;
  right: 30rpx;
  bottom: 60rpx;
  border-radius: 50%;
  overflow: hidden;
}
.userHeaderImage{
  width: 126rpx;
  height: 126rpx;
  background: url("../../image/21.png");
  background-size: contain;
  border-radius: 50%;
}
.userHeaderPress{
  composes: userHeader; 
  transform: scale(0.9,0.9)
}
.sigBtn{
  width: 144rpx;
  height: 114rpx;
  background: url("../../image/45.png");
  background-size: contain;
  position: absolute;
  right: 20rpx;
  bottom: 220rpx;
}
.sigBtnPress{
  composes: sigBtn; 
  transform: scale(0.9,0.9)
}
.sigBox{
  composes: newGiftBox; 
  background-color: rgba(0, 0, 0, 0)
}
.sig{
  composes:newGift;
  width: 670rpx;
  height: 854rpx;
  margin-top: 0rpx;
  overflow: visible;
  justify-content: flex-start;
}
.sigHeader{
  width: 720rpx;
  height: 118rpx;
  background: url("../../image/46.png");
  background-size: contain;
  margin-top: 30rpx;
}
.sigCardBox {
  width: 640rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10rpx;
}
.sigCardBox2 {
  composes: sigCardBox;
  width: 500rpx;
  margin: 0 auto;
}
.sigGold {
  background-image: url('../../image/66.png');
  background-size: 360rpx 360rpx;
  width: 120rpx;
  height: 120rpx;
  margin: 0 auto;
}
.sigGold1 {
  background-position: 0rpx 0rpx;
}
.sigGold2 {
  background-position: -120rpx 0rpx;
}
.sigGold3 {
  background-position: 0rpx -120rpx;
}
.sigGold5 {
  background-position: -120rpx -120rpx;
}
.sigGold6 {
  background-position: -240rpx 0rpx;
}
.sigGold8 {
  background-position: -240rpx -120rpx;
}
.sigGold10 {
  background-position: 0rpx -240rpx;
}
.sigCard {
  width: 140rpx;
  height: 220rpx;
  margin-top: 20rpx;
  border-radius: 12rpx;
  background-color: #FFF8D7;
  box-shadow: 0 1px 2px 0 #DC860A,
  inset 0 -2px 1px 0 #F4C069,
  inset 0 0 8px 0 #FFEA8A;
}
.sigCardGreen {
  composes: sigCard;
  border: 2px solid #88FE77;
  box-shadow: inset 0 0 6px 0 #82FF82;
  background-color: rgb(83, 228, 67);
} 
.sigCardTitle {
  height: 44rpx;
  line-height: 44rpx;
  background: #FF8E2E;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
}
.sigCardTitleGreen {
  composes: sigCardTitle;
  background-color: #2BD51F;
}
.sigCardMaskHide {
  display: none;
}
.sigCardMask {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 1;
}
.sigCardMaskOpacity {
  composes: sigCardMask;
  background-color: rgba(0, 0, 0, 0);
}
.signCardCheck {
  width: 84rpx;
  height: 84rpx;
  background-image: url('../../image/51.png');
  background-size: contain;
}
.sigCardGoldCount {
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 72rpx;
  height: 32rpx;
  line-height: 32rpx;
  font-size: 28rpx;
  color: #FFFFFF;
  text-align: center;
  background: #FFB534;
  border-radius: 200rpx;
  font-style: italic;
}
.sigGoldCountGreen {
  composes: sigCardGoldCount;
  background-color: rgb(21, 152, 3);
}

.flyGold {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 44rpx;
}
.flyGoldShine {
  width: 140rpx;
  height: 140rpx;
  background-image: url('../../image/49.png');
  background-size: contain;
  transition: all .4s .2s;
  transform: scale(0);
  transform-origin: center;
  animation: rotate 4.5s infinite linear;
}
.flyGoldItem {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  background-image: url('../../image/11.png');
  background-size: contain;
  z-index: 1;
  transition: all .4s .4s;
  transform: scale(0);
  transform-origin: center;
  z-index: 2;
}
.flyGoldShineZoom {
  transform: scale(1);
}
.flyGoldItemZoom {
  transform: scale(1);
}
.flyGoldItemRotate {
  animation: rotateY .8s infinite linear;
}



.flyingGoldItem {
  transition: all 1s;
  z-index: 1;
}